<template>
  <div class="add-container">
    <h3>Add组件</h3>
    <!-- 直接使用： this.$store.state.变量名 -->
    <p>已知库存数: {{ $store.state.num }}</p>
    <!-- <p>已知库存数: {{ $store.state.name }}</p> -->

    <!-- <button @click="addFn">库存+1</button> -->
    <button @click="$store.commit('addNum')">库存+1</button>
    <button @click="asyncAddFn">延迟2秒，库存+7</button>
    <button @click="$store.dispatch('asyncAddNum', 6)">延迟2秒，库存+6</button>
  </div>
</template>

<script>
export default {
  name: "Add",
  methods: {
    addFn() {
      this.$store.commit("addNum");
    },
    asyncAddFn() {
      this.$store.dispatch("asyncAddNum", 7);
    },
  },
};
</script>
